<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	xmlns:p="http://primefaces.org/ui"
	xmlns:cc="http://java.sun.com/jsf/composite"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:hmrList="http://java.sun.com/jsf/composite/list"	
	xmlns:hmrTable="http://java.sun.com/jsf/composite/table"	
	
	xmlns:hmrDetail="http://java.sun.com/jsf/composite/detail"		>

<cc:interface>
	<cc:attribute name="handler"		type="com.hemerasolutions.v2trainer.component.interfaces.table.GroupedExerciseTableCompInterface" required="true"/>
	<cc:attribute name="editable"		type="java.lang.Boolean"	default="false"	 required="true"/>	
</cc:interface>

<cc:implementation>
	<span id="#{cc.clientId}" >

		<hmrTable:exerciseTable id="sourceExerciseTable" mode="select" handler="#{cc.attrs.handler.exerciseTable}" editable="#{cc.attrs.editable}" 
			updateOnSelect=":growl :#{cc.clientId}:exercisesForm"/>

		<p:spacer height="50" />
		
		<h:form id="exercisesForm" prependId="false">
			<p:dataTable id="exercisesTable" value="#{cc.attrs.handler.exerciseGroup.exercises}" var="exercise" paginator="true"  
				paginatorAlwaysVisible="false"  paginatorPosition="bottom" rows="8" emptyMessage="#{msgs.NoResults}" rowStyleClass="#{exercise == cc.attrs.handler.exercise ? 'ui-state-highlight' : null}">   
	
				<p:columnGroup type="header" >  
					<p:row>
						<p:column colspan="8" style="text-align:center;">
							<f:facet name="header">
								<h:outputText value="#{msgs.ExerciseGroupExercises}: #{cc.attrs.handler.exerciseGroup.name}" />
							</f:facet>
						</p:column>
					</p:row>
					<p:row>
						<p:column	colspan="4"  >
							<f:facet name="header" > 
								<h:outputText value="#{msgs.Name}" style="padding-top:4px"/>
							</f:facet>
						</p:column>
						<p:column	colspan="1" style="padding:0px;margin:0px;max-width:300px;min-width:300px;width:300px">
							<f:facet name="header">
								<h:outputText value="#{msgs.Description}"/>
							</f:facet>
						</p:column>
						<p:column	colspan="1" style="padding:0px;margin:0px;">
							<f:facet name="header">
								<h:outputText value="#{msgs.BodyRegion}"/> 
							</f:facet>
						</p:column>
						<p:column	colspan="1" style="padding:0px;margin:0px;">
							<f:facet name="header">
								<h:outputText value="#{msgs.MuscleGroup}"/>
							</f:facet>
						</p:column>
					</p:row>	 
				</p:columnGroup>
	
				<p:column colspan="1"	styleClass="ui-table-button-row" style="position:relative;max-height:15px !important;padding-top:0px !important;padding-bottom:0px !important"  >
					<p:commandButton actionListener="#{cc.attrs.handler.upExercise}"   update="exercisesTable"  title="#{msgs.Up}" 
						style="float:left;top:0px;" 	icon="ui-icon-triangle-1-n" styleClass="ui-half-table-button" >
						<f:attribute name="exercise" value="#{exercise}"/>
					</p:commandButton > 
					<p:commandButton actionListener="#{cc.attrs.handler.downExercise}"   update="exercisesTable"  title="#{msgs.Down}" 
						style="float:left;" 			icon="ui-icon-triangle-1-s" styleClass="ui-half-table-button" >
						<f:attribute name="exercise" value="#{exercise}"/>
					</p:commandButton >
				</p:column>
	
				<p:column colspan="1" headerText="#{msgs.Name}" style="max-width:150px;min-width:150px;width:150px"  >
					<h:outputText value="#{exercise.name}" />
				</p:column>
	
				<p:column colspan="1" styleClass="ui-table-button-row" >
					<p:commandButton  title="#{msgs.View}" action="#{cc.attrs.handler.toViewExercise}" icon="ui-icon-search" 
						update=":exerciseDialog" oncomplete="PF('wexerciseDialog_#{cc.id}.show()')"  styleClass="ui-table-button">
						<f:setPropertyActionListener target="#{cc.attrs.handler.exercise}" value="#{exercise}"/>
					</p:commandButton>
				</p:column>
	
				<p:column colspan="1" styleClass="ui-table-button-row"  >
					<p:commandButton title="#{msgs.Delete}" icon="ui-icon-trash" styleClass="ui-table-button" action="#{cc.attrs.handler.deleteExercise}"
						 update=":growl, :#{cc.clientId}:sourceExerciseTable, exercisesTable"	 >
						<f:setPropertyActionListener target="#{cc.attrs.handler.exercise}" value="#{exercise}"/>
					</p:commandButton>
	
				</p:column>		
				<p:column headerText="#{msgs.Description}" style="max-width:300px;min-width:300px;width:300px" >
					<h:outputText value="#{exercise.description}" />
				</p:column>		
	
				<p:column headerText="#{msgs.BodyRegion}" >
					<h:outputText value="#{exercise.bodyRegionsText}" />
				</p:column>		
	
				<p:column headerText="#{msgs.MuscleGroup}" >
					<h:outputText value="#{exercise.muscleGroupsText}" />
				</p:column>		
	
			</p:dataTable>	
		</h:form>	
	</span>


	<p:dialog id="exerciseDialog" header="#{msgs.Exercise}" modal="true" appendTo="@(body)" widgetVar="wexerciseDialog_#{cc.id}" style="width:90%"> 
		<hmrDetail:exerciseDetails handler="#{cc.attrs.handler.exerciseDetails}" 
			editable="false"
			intensitySummary="true" />

		<div align="left"   > 
			<p:commandButton type="button" value="#{msgs.Cancel}"		icon="ui-icon-cancel" onclick="wexerciseDialog_#{cc.id}.hide()"/>
		</div>
	</p:dialog>
</cc:implementation>


</html>